<template>
  <view>
    <view class="card" v-for="(item, index) in CardList" :key="index">
      <image src="../../static/images/ci_card.jpg"></image>
      <view class="card-box" @click="navTo(item)">
        <text class="title">{{ item.FName }}</text>
        <text class="explain">购买次数: {{ item.FTime }}次卡</text>
        <text class="explain">使用期限: {{ item.FCardTypeDesc }}</text>
        <view class="topUp">
          <text>￥{{ item.FAmount }}</text>
          <button class="but">立即购买</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { reqPost } from "../../common/http.request";

export default {
  data() {
    return {
      id: 0,
      CardList: [],
    };
  },
  async onLoad() {
    this.CardList = (await reqPost("GetMemberTime")).Data;
  },
  methods: {
    navTo(item) {
      console.log(item);
      uni.navigateTo({
        url: `/pages/coupon/cardBuy?goodsCard=${JSON.stringify(item)}`,
      });
    },
  },
};
</script>

<style lang="scss">
@import "../../static/css/li_mixins.scss";
.card {
  height: auto;
  margin: 20upx 10upx;
  padding: 20upx;
  border-bottom: 2upx solid #f1f1f1;
  float: left;
  image {
    width: 180upx;
    height: 180upx;
    margin-right: 20upx;
    display: block;
    float: left;
    border-radius: 20upx;
  }
  .card-box {
    width: 490upx;
    height: 180upx;
    float: left;
    .title {
      display: block;
      color: #000;
      line-height: 42upx;
      margin-bottom: 10upx;
    }
    .explain {
      color: #a2a2a2;
      font-size: 24upx;
      line-height: 32upx;
      display: block;
      margin-bottom: 10upx;
    }
    .topUp {
      // width: 100%;
      .but {
        width: 180upx;
        height: 50upx;
        line-height: 50upx;
        background: $li-primary-color;
        padding: 0 20upx;
        float: right;
        color: #fff;
        font-size: 32upx;
        border-radius: 0;
      }
      text {
        color: $li-primary-color;
        font-size: 32upx;
        line-height: 50upx;
        display: block;
        float: left;
      }
    }
  }
}
</style>
